import { Button } from "antd";
import React, { useState, useEffect} from "react";
import { useDebounce } from './utils'
export default function TestEffect() {
  const [count, setCount] = useState(0)
  const [num, setNum] = useState(0)
  const countAdd = () => {
    setCount(count+1)
  }
  // 第二个参数为空数组时，只有在初次渲染完成后才会触发一次，
  // 当数组中有一个值时，如果这个值发生变化，就会触发
  // 当数组中有多个值时，只要有一个值发生变化，就会触发
  
  // useEffect(() => {
  //   console.log('update')
  // }, [count, num])

  const funTest = () => {
    console.log('我是函数')
  }
  // 将useEffect封装到utils中，通过调用useDebounce方法进行使用
  const debounce = useDebounce(funTest, count, 1000)

  return(
    <div style={{display:'flex',flexDirection:'column',alignItems:'center'}}>
      <h5>测试useEffect</h5>
      <h5>count:{count}</h5>
      <Button type="primary" onClick={countAdd}>count++</Button>
    </div>
  )
}
